<route lang="json5" type="home">
{
  layout: 'default',
  style: {
    navigationBarTitleText: 'login',
    navigationStyle: 'custom',
  },
}
</route>

<template>
  <view class="login-container">
    <view class="top-container h-80 w-full to-secondary rounded-b-3xl overflow-hidden relative">
      <image
        src="/static/images/logo-bg.avif"
        mode="scaleToFill"
        class="w-full h-full object-cover opacity-50"
      />
      <view class="logo-box absolute inset-0 flex flex-col justify-center items-center">
        <view
          class="logo w-24 h-24 rounded-full bg-white flex items-center justify-center mb-4 shadow-lg mt-60rpx"
        >
          <image class="w-80rpx h-80rpx" src="/static/icon/leaf-line.png" mode="scaleToFill" />
        </view>
        <text class="text-white text-3xl font-bold">轻食记</text>
        <text class="text-white text-sm mt-2">健康饮食，轻松减脂</text>
      </view>
      <!-- 装饰 -->
      <view
        class="absolute -bottom-6 right-10 w-12 h-12 bg-white/20 rounded-full backdrop-blur-sm"
      />
      <view class="absolute -bottom-2 right-24 w-8 h-8 bg-white/30 rounded-full backdrop-blur-sm" />
    </view>
    <view class="login-content px-8 pt-8 pb-4">
      <view class="mb-6">
        <text class="text-2xl font-bold welcome-text mb-2">欢迎使用轻食记</text>
        <view class="desc text-sm mt-10rpx">
          <view class="my-10rpx text-26rpx">你的随身饮食小助手！</view>
          <view class="leading-6">{{ describe.result }}</view>
        </view>
      </view>
    </view>
    <view class="login-btn mt-40rpx">
      <button class="wechat-btn" hover-class="wechat-btn-hover" @click="useUserStore().wxLogin()">
        <view class="flex items-center justify-center">
          <image class="w-50rpx h-50rpx mr-8rpx" src="/static/icon/wechat.png" mode="scaleToFill" />
          <text>微信登陆</text>
        </view>
      </button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useStatusBarHeight } from '@/hooks/useStatusBarHeight'
import { useUserStore } from '@/store'
const { statusBarHeight } = useStatusBarHeight()
const describe = ref({
  text: '像记便签一样简单，轻松记录每日饮食，科学管理热量，减脂控卡更高效！',
  index: 0,
  result: '',
})
onMounted(() => {
  printText()
})
const printText = () => {
  if (describe.value.index < describe.value.text.length) {
    describe.value.result = describe.value.text.substring(0, describe.value.index++) + '_'
    setTimeout(printText, 100)
  } else {
    describe.value.result = describe.value.text
  }
}
</script>
<style>
page {
  background: var(--primaryLighter);
}
</style>
<style lang="scss" scoped>
.login-container {
  .top-container {
    background-image: linear-gradient(to right, var(--primary) 0%, var(--secondary) 100%);
  }
  .welcome-text {
    color: var(--textPrimary);
  }
  .desc {
    color: var(--textSecondary);
  }
}
.login-btn {
  .wechat-btn {
    width: 600rpx;
    height: 95rpx;
    font-size: 28rpx;
    line-height: 95rpx;
    color: #fff;
    background-color: var(--secondary);
    border-radius: 60rpx;
  }
  .wechat-btn-hover {
    background-color: #7cb342;
  }
}
</style>
